<template>
  <div id="app">
    <div class="title">子项目录清单详情信息</div>
    <div class="context">
      <table>
        <tbody>
          <tr>
            <td class="tdl">是否存在子项：</td>
            <td class="tdr">否</td>
            <td class="tdl">是否纳入国家项目：</td>
            <td class="tdr">否</td>
            <td class="tdl">目标清单状态：</td>
            <td class="tdr">待审核</td>
          </tr>
          <tr>
            <td class="tdl">计划生效日期：</td>
            <td class="tdr">2021-05-31</td>
            <td class="tdl">计划取消日期：</td>
            <td class="tdr">2022-05-31</td>
            <td class="tdl">目录来源：</td>
            <td class="tdr">录入</td>
          </tr>
          <tr>
            <td class="tdl">目录版本号：</td>
            <td class="tdr" colspan="6">1</td>
          </tr>
          <tr>
            <td class="tdl" style="height: 187px">设定依据：</td>
            <td class="tdr" colspan="6" style="padding: 0">
              <tr style="height: 61px; padding: 0">
                <td colspan="6" style="border: none">123</td>
              </tr>
              <tr style="height: 61px">
                <td style="border-left: none; border-right: none; width: 1800px">123</td>
              </tr>
              <tr style="height: 61px">
                <td style="border: none">123</td>
              </tr>
            </td>
          </tr>
          <tr>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
          </tr>
          <tr>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr" colspan="6">法定本机行使</td>
          </tr>
          <tr>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr" colspan="6">法定本机行使</td>
          </tr>
          <tr>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr" colspan="6">法定本机行使</td>
          </tr>
          <tr>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
          </tr>
          <tr>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
            <td class="tdl">所属区域划分：</td>
            <td class="tdr">法定本机行使</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  // import PageTop from "../../../components/PageTop";
  export default {
    components: {
      // PageTop
    },
    data() {
      return {};
    },
    methods: {
      onShow() {
        this.$emit('onShow', false);
      }
    }
  };
</script>

<style lang="scss" scoped>
  #app {
    width: 94%;
    margin: auto;
    background: #fff;
    border-radius: 20px;
    .page-top {
      height: 90px;
      width: 100%;
    }
    .title {
      font-size: 24px;
      color: #222;
      font-weight: bold;
      padding: 30px 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #d8dfe9;
    }
    .context {
      padding: 30px 40px;
      box-sizing: border-box;
      table,
      td {
        border: 1px solid #d8dfe9;
        border-collapse: collapse;
      }
      table {
        width: 100%;
        tr {
          .tdl {
            width: 200px;
            height: 63px;
            line-height: 63px;
            text-align: right;
            font-size: 18px;
            color: #222;
            background: #eff3f9;
          }
          .tdr {
            padding-left: 15px;
            width: 374px;
          }
        }
      }
    }
  }
</style>
